import React, { Component } from 'react'
import './index.css';
import axios from 'axios';
import {Link} from 'react-router-dom';
export default class LOL extends Component {
    state = {
        heros: []
    }
    render() {
        return (
                <div class="container">
                    <h2>英雄列表</h2>
                    <hr />
                    <div class="hero-list">
                        {
                            this.state.heros.map(item => {
                                return <div class="item" key={item.id}>
                                            <Link to={"/hero/" + item.id}><img src={item.avatar} alt=""/></Link>
                                            <h5>{item.name}</h5>
                                        </div>
                            })
                        }
                        
                    </div>
                </div>
        )
    }

    async componentDidMount(){
        let {data} = await axios('http://api.xiaohigh.com:8090/lol');

        this.setState({
            heros: data
        })
    }
}
